<template>
  <div>
    <el-form :model="form" ref="form">
      <el-form-item v-for="(domain, index) in form.domains" :key="domain.id">
        <div class="boxContent">
          <div class="indexText">
            <div>排序:</div>

            <input type="text" v-model="domain.sort" class="indexInput" />
          </div>
          <div class="indexStyle">显示:</div>
          <div class="indexTexts">
            <el-select v-model="domain.enable" placeholder="请选择">
              <el-option
                v-for="item in AccordingData"
                :key="item.itemValue"
                :label="item.itemText"
                :value="item.itemValue"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 分享描述:<el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="domain.copywriting"
            @input="change(index, domain)"
          >
          </el-input> -->
          图片显示:
          <el-upload
            class="upload-demo"
            list-type="picture"
            :action="uploadUrl"
            :data="formData"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="successIcon"
            :on-error="errorIcon"
            :on-exceed="handleExceed"
            :file-list="domain.item"
            :limit="1"
            ref="up"
            :on-change="change1"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              @click="uploadOss(index)"
              >选取文件</el-button
            >
          </el-upload>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" append-to-body width="30%">
      <img :src="showImgUrl" style="width: 100%; heighr: 200px" />
    </el-dialog>
    <el-button size="small" type="primary" @click="addDomain"
      >添加选项</el-button
    >
    <el-button size="small" type="primary" @click="pushData"> 上传 </el-button>
  </div>

</template>
<script>
import {
  LandingOss,
  LandingAdd,
  LandingImg,
  getLandingPage,
} from "../../../src/assets/js/api";
export default {
  // name: "ProductPromotion",
  props: ["getLandingPageImage", "promotionId", "AccordingData"],
  data() {
    return {
      form: {
        domains: [],
      },
      arrayData: [],
      textarea: "",
      fileList: [],
      formData: {},
      uploadUrl: "",
      dialogVisible: false,
      showImgUrl: "",
      uplist: new Map(),
    };
  },
  created() {
    this.arrayData = this.getLandingPageImage;
    this.end();
  },

  methods: {
    end() {
      
      this.form.domains = this.arrayData.map((res) => {
        return {
          sort: res.sort,
          enable: Number(res.enable),
          item: [res],
          imgType: 2, //推广图的状态码!
          // copywriting: res.copywriting, //分享描述!
        };
      });
    },
    //选取文件!
    uploadOss(index) {
      LandingOss().then((res) => {
        //设置 上传地址 以及表单的一些项目
        let dataOss = res.data;

        this.formData.key = dataOss.dir + dataOss.fileName + ".png";
        this.formData.OSSAccessKeyId = dataOss.accessid;
        this.formData.policy = dataOss.policy;
        this.formData.Signature = dataOss.signature;
        this.formData.success_action_status = 200;
        this.uploadUrl = dataOss.host;
        this.fileName = dataOss.fileName;
        this.uplist.set(index, dataOss.fileName + ".png");
      });
    },
    //已经成功上传成功
    successIcon(file, fileList) {
      this.$message.success("上传成功");
      let data = {};
      data.fileName = this.fileName + ".png";
      this.uplist.set(fileList.name, fileList.uid);

      data.pid = this.promotionId;
      data.showName = fileList.name;
    },
    errorIcon() {
      this.$message.error("上传失败");
    },
    handleRemove() {
      // console.log(file, fileList);

      this.$message.success("移除成功!");
    },
    handlePreview(file) {
      this.showImgUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed() {
      alert("最多只能上传一个");
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      let id = file.id;
      LandingImg(id).then((res) => {
        this.$emit("promotionClose", false);
        this.fileList = [];
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    addDomain() {
      this.form.domains.push({
        sort: "",
        // copywriting: "", //分享描述!
        item: [],
        enable: null,
        imgType: 2, //推广图状态码!
      });
      //   console.log(this.form.domains);
    },
    pushData() {
      if (this.form.domains.length == 0) {
        this.$message.error("请上传文件");
        return;
      }
      let { up } = this.$refs;
      let arr = [];
      const { domains } = this.form;
      for (let i = 0; i < up.length; i++) {
        if (up.length == 0) {
          alert("图片是必须上传的");
          return false;
        }
        let item = up[i].$data.uploadFiles[0];
        let url = item.url.split("/")[7];
        url = url ? url : this.uplist.get(i);

        arr.push({
          pid: this.promotionId,
          id: item.id ? item.id : null,
          showName: item.name,
          fileName: url,
          // copywriting: domains[i].copywriting,
          sort: Number(domains[i].sort),
          enable: Number(domains[i].enable),
          imgType: 2, //推广图状态码!
        });
      }

      LandingAdd(arr).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
      setTimeout(() => {
        getLandingPage(this.promotionId).then((res) => {
          this.arrayData = res.data;
          this.end();
        });
      }, 1000);
    },
    change() {
      this.$forceUpdate();
      //   console.log(this.form.domains);
    },
    input() {
      this.$forceUpdate();
    },
    change1() {
      //   console.log(file, fileList);
    },
  },
};
</script>
<style scoped type="less">
.boxContent {
  position: relative;
}
.indexText {
  position: absolute;
  right: 10px;
  display: flex;
  width: 20%;
}
.indexTexts {
  position: absolute;
  left: 40px;
  display: flex;
  width: 20%;
}
.indexStyle {
  position: absolute;
  top: 0;
  left: 0;
  width: 30;
}
.indexInput {
  width: 40px;
  height: 26px;
  text-align: center;
  border: 2px solid #dcdfe6;
  border-radius: 6px;
}

.el-form {
  /* overflow: hidden; */
  overflow: auto;
  height: 600px;
}
.el-form::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.el-form::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #9e9e9e;
  box-shadow: inset 0 0 5px red(0, 122, 204);
}

.el-form::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;

  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
